<template>
  <div style="display: flex; flex-direction: column; width: auto; height: 800px; gap: 20px; padding: 20px; ">
    <!-- 图表容器 -->
    <div style="display: flex; flex: 1; gap: 20px;">
      <!-- 发送人网络类型图表容器 -->
      <div ref="sendernetworkTypeChart" style="flex: 1; height: 100%;"></div>
      <!-- 接收人网络类型图表容器 -->
      <div ref="receivernetworkTypeChart" style="flex: 1; height: 100%;"></div>
    </div>

    <!-- 边框内容（分析文本） -->
    <div class="item" style="margin: 0 auto; width: 80%; max-width: 900px;">
      <div>
        <p>
          通过对比发送方和接收方的网络类型分布数据可以看出，4G 网络在双方中均占据主导地位，使用量远超其他网络类型，是当前最主流的网络类型；5G 网络的使用量在发送方和接收方中均位居第二，且与 4G 的差距在逐步缩小，显示出 5G 网络正在迅速普及；而 3G 网络的使用量在双方中均处于最低水平，表明 3G 网络正在逐渐被淘汰。
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { fetchData } from '../Api/api.js';

export default {
  data() {
    return {
      receivernetworkTypes: [], // 用于存储接收人网络类型的数据
      sendernetworkTypes: [], // 用于存储发送人网络类型的数据
      receivernetworkTypeChart: null, // 接收人网络类型图表的 ECharts 实例
      sendernetworkTypeChart: null, // 发送人网络类型图表的 ECharts 实例
    };
  },

  async mounted() {
    try {
      // 异步获取接收人网络类型数据
      const receivernetworkData = await fetchData('geteleven');
      this.receivernetworkTypes = receivernetworkData;

      // 异步获取网络类型数据
      const sendernetworkData = await fetchData('getten');
      this.sendernetworkTypes = sendernetworkData;

      // 初始化两个图表
      this.initreceiverNetworkTypeChart();
      this.initsenderNetworkTypeChart();
    } catch (error) {
      console.error('数据获取失败:', error);
    }
  },

  methods: {
    // 初始化网络类型图表
    initreceiverNetworkTypeChart() {
      if (!this.receivernetworkTypes || this.receivernetworkTypes.length === 0) {
        console.warn('没有网络类型数据用于初始化图表');
        return;
      }

      // 初始化 ECharts 实例
      this.receivernetworkTypeChart = echarts.init(this.$refs.receivernetworkTypeChart);

      // 配置图表选项
      const option = {
        title: {
          text: '接收方网络类型分布',
          left: 'center', // 标题居中
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>数量: {c}',
        },
        aria: {
          enabled: true,
          decal: {
            show: true
          }
        },
        series: [
          {
            name: '接收方网络类型分布',
            type: 'pie',
            radius: ['40%', '70%'],
            data: this.receivernetworkTypes.map((receivernetwork) => ({
              value: receivernetwork.receiverNetworkCnt,
              name: receivernetwork.receiverNetwork,
            })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };

      // 设置图表选项
      this.receivernetworkTypeChart.setOption(option);
    },

    // 初始化网络类型图表
    initsenderNetworkTypeChart() {
      if (!this.sendernetworkTypes || this.sendernetworkTypes.length === 0) {
        console.warn('没有网络类型数据用于初始化图表');
        return;
      }

      // 初始化 ECharts 实例
      this.sendernetworkTypeChart = echarts.init(this.$refs.sendernetworkTypeChart);

      // 配置图表选项
      const option = {
        title: {
          text: '发送方网络类型分布',
          left: 'center', // 标题居中
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>数量: {c}',
        },
        aria: {
          enabled: true,
          decal: {
            show: true
          }
        },
        series: [
          {
            name: '发送方网络类型分布',
            type: 'pie',
            radius: ['40%', '70%'],
            data: this.sendernetworkTypes.map((sendernetwork) => ({
              value: sendernetwork.senderNetworkCnt,
              name: sendernetwork.senderNetwork,
            })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };

      // 设置图表选项
      this.sendernetworkTypeChart.setOption(option);
    },
  },

  beforeDestroy() {
    // 销毁 ECharts 实例，防止内存泄漏
    if (this.receivernetworkTypeChart) {
      this.receivernetworkTypeChart.dispose();
    }
    if (this.sendernetworkTypeChart) {
      this.sendernetworkTypeChart.dispose();
    }
  },
};
</script>

<style lang="less" scoped>
@keyframes opacityChange {
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
div.item {
  width: 500px;
  height: 500px;
  div {
    --borderWidth: 12px;
    --bRadius: 10px;
    width: 100%;
    height: 30%;
    position: relative;
    z-index: 0;
    overflow: hidden;
    z-index: 0;
    border-radius: var(--bRadius);
    display: flex;
    align-items: center;
    justify-content: center;
    &::after,
    &::before {
      box-sizing: border-box;
    }
    &::before {
      content: '';
      position: absolute;
      z-index: -2;
      left: -50%;
      top: -50%;
      width: 200%;
      height: 200%;
      background-color: #1a232a;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
      animation: rotate 4s linear infinite;
    }

    &::after {
      content: '';
      position: absolute;
      z-index: -1;
      left: calc(var(--borderWidth) / 2);
      top: calc(var(--borderWidth) / 2);
      width: calc(100% - var(--borderWidth));
      height: calc(100% - var(--borderWidth));
      background: #fff; /* 将背景颜色设置为白色 */
      border-radius: calc(var(--bRadius) - calc(var(--borderWidth) / 2)); /* 调整边框半径以匹配边框宽度 */
    }
    p {
      padding: 20px;
      text-align: center;
      font-size: 14px;
      line-height: 1.5;
      color: #333;
    }
  }
}
</style>